<template>
  <div class="music">
    <!-- top -->
    <TopView name="music" title="音乐盒" msg="花未全开，月儿未圆，人间最好的境界。有所期待，有所憧憬，人生美妙的事情"></TopView>

    <div class="music-wrap">
      <div class="music-menu">
        <!-- 标题 -->
        <div class="top">
          <div class="title">
            <i class="fa fa-music"></i>
            我的音乐播放器
          </div>
          <div class="search">
            <div class="label">歌曲名称：</div>
            <el-input v-model="songname" placeholder="请输入歌曲名称" style="margin-right: 10px; width: 240px" @keyup.enter.native="search"></el-input>
            <el-button type="primary" @click="search" icon="fa fa-search"></el-button>
          </div>
        </div>
        <el-card>
          <!-- 音乐播放器 -->
          <audio class="audio" ref="audio" :src="songUrl" @play="play" @pause="pause" controls autoplay loop></audio>

          <!-- 歌曲详情 -->
          <div class="detail">
            <!-- 搜索结果列表 -->
            <div class="musicTable">
              <el-table :data="musicList" stripe border height="600">
                <el-table-column label="歌名" prop="name">
                  <template slot-scope="scope">{{ scope.row.name + '-' + (scope.$index + 1) }}</template>
                </el-table-column>
                <el-table-column align="center" label="播放/MV" fixed="right" width="90">
                  <template slot-scope="scope">
                    <i title="播放音乐" class="fa fa-headphones icon" @click="playMusic(scope.row.name + '-' + (scope.$index + 1), scope.row.id, scope.row.artists)"></i>
                    <i title="观看MV" class="fa fa-film icon" @click="lookMv(scope.row.mvid)" v-if="scope.row.mvid !== 0"></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 黑胶唱片 -->
            <div class="cover">
              <h2>正在播放：{{ playSongName }}</h2>
              <div class="artists">
                <div v-for="item in artists" :key="item.id">{{ item.name }}</div>
              </div>
              <div :class="'pan ' + animation">
                <el-image class="bg" :src="require('../assets/musicPan1.png')" lazy fit="cover" />
                <el-image class="musicCover" :src="musicCover === '' ? require('../assets/friend1.jpg') : musicCover" lazy fit="cover" />
              </div>
            </div>

            <!-- 评论 -->
            <div class="comments">
              <div v-if="hotComments.length === 0" class="noComment">暂无评论</div>
              <div v-else class="list" v-for="item in hotComments" :key="item.commentId">
                <el-image class="avatar" :src="item.user.avatarUrl" lazy fit="cover" />
                <div class="conment-detail">
                  <div class="conment-top">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="time">{{ item.timeStr }}</span>
                  </div>
                  <div class="bottom">{{ item.content }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- MV -->
          <div class="video_con" v-if="isShow">
            <video ref="video" :src="mvUrl" controls></video>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
import $ from 'jquery'

export default {
  name: 'MusicView',
  components: {
    TopView
  },
  data() {
    return {
      // 搜索的歌曲列表
      musicList: [],
      // 歌曲名称
      songname: '失眠飞行',
      // 当前播放的歌名
      playSongName: '',
      // 歌手
      artists: [],
      // 黑胶唱片旋转动画动画
      animation: '',
      // 歌曲是否播放
      isPlaying: false,
      // 歌曲地址
      songUrl: '',
      // 歌曲封面
      musicCover: '',
      // 歌曲热评
      hotComments: [],
      // mv地址
      mvUrl: '',
      // 是否观看MV
      isShow: false
    }
  },
  created() {
    this.search(this.songname)
  },
  methods: {
    // 搜索歌曲获取搜索结果列表
    search() {
      $.ajax({
        url: 'https://autumnfish.cn/search?keywords=' + this.songname,
        type: 'get',
        responseType: 'application/json',
        scriptCharset: 'GBK', // 解决中文乱码
        success: res => {
          this.musicList = res.result.songs
          // 默认播放第一首
          this.playMusic(this.musicList[0].name + '1', this.musicList[0].id, this.musicList[0].artists)
        },
        error: e => {
          this.$message({
            type: 'error',
            message: e
          })
          console.log(e)
        }
      })
    },

    // 点击播放按钮获取歌曲详情
    playMusic(currentName, musicId, artists) {
      this.isShow = false
      this.playSongName = currentName
      this.artists = artists
      // 获取歌曲地址
      $.ajax({
        url: 'https://autumnfish.cn/song/url?id=' + musicId,
        type: 'get',
        responseType: 'application/json',
        scriptCharset: 'GBK', // 解决中文乱码
        success: res => {
          this.songUrl = res.data[0].url
        },
        error: e => {
          this.$message({
            type: 'error',
            message: e
          })
          console.log(e)
        }
      })

      // 获取歌曲唱片封面
      $.ajax({
        url: 'https://autumnfish.cn/song/detail?ids=' + musicId,
        type: 'get',
        responseType: 'application/json',
        scriptCharset: 'GBK', // 解决中文乱码
        success: res => {
          this.musicCover = res.songs[0].al.picUrl
        },
        error: e => {
          this.$message({
            type: 'error',
            message: e
          })
          console.log(e)
        }
      })

      // 歌曲评论获取
      $.ajax({
        url: 'https://autumnfish.cn/comment/hot?type=0&id=' + musicId,
        type: 'get',
        responseType: 'application/json',
        scriptCharset: 'GBK', // 解决中文乱码
        success: res => {
          this.hotComments = res.hotComments
        },
        error: e => {
          this.$message({
            type: 'error',
            message: e
          })
          console.log(e)
        }
      })

      // 添加动画
      if (this.isPlaying) {
        this.animation = 'coverAnimate'
      }
    },

    // 歌曲播放
    play() {
      this.isPlaying = true
      this.animation = 'coverAnimate'
    },

    // 歌曲暂停
    pause() {
      this.isPlaying = false
      this.animation = ''
    },

    // 播放mv
    playMv(mvid) {
      $.ajax({
        url: 'https://autumnfish.cn/mv/url?id=' + mvid,
        type: 'get',
        responseType: 'application/json',
        scriptCharset: 'GBK', // 解决中文乱码
        success: res => {
          this.isShow = true
          this.mvUrl = res.data.url
        },
        error: e => {
          this.$message({
            type: 'error',
            message: e
          })
          console.log(e)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
// 旋转动画
@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.music {
  width: 100%;
  height: auto;

  .music-wrap {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.9;
    position: relative;
    top: -60px;
    left: 0;

    .music-menu {
      background-color: #fff;
      border-radius: 5px;

      .top {
        text-align: left;
        font-size: 25px;
        font-weight: bold;
        background-color: #0bb481;
        border-radius: 5px 5px 0 0;
        padding-bottom: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-flow: row nowrap;
        align-items: center;

        .title {
          width: 230px;
          color: #fff;
          padding: 10px;
          box-sizing: border-box;

          i {
            margin-right: 5px;
            color: #fff;
          }
        }

        .search {
          width: 420px;
          display: flex;
          justify-content: flex-start;
          flex-flow: row nowrap;
          align-items: center;
          margin-top: 10px;

          .label {
            font-size: 16px;
            color: #fff;
          }
        }
      }

      .audio {
        width: 100%;
        margin: 20px 0;
      }

      .detail {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-flow: row nowrap;
        align-items: center;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 3px solid #0bb481;

        .musicTable {
          width: 30%;
          padding-right: 10px;
          box-sizing: border-box;
          border-right: 3px solid #0bac7c;

          .icon {
            font-size: 18px;
            margin-right: 10px;
            color: #3782d1;
            cursor: pointer;
          }
        }

        .pan {
          width: 100%;
          height: 375px;
          position: relative;
        }

        .coverAnimate {
          animation: myfirst 15s infinite linear;
        }

        .cover {
          width: 40%;
          height: auto;

          h2 {
            margin-bottom: 10px;
          }

          .bg {
            width: 375px;
            height: 375px;
            border-radius: 50%;
            vertical-align: middle;
            max-width: 100%;
          }

          .musicCover {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            vertical-align: middle;
            max-width: 100%;
            border-radius: 50%;
          }
        }

        .comments {
          border-left: 3px solid #0bac7c;
          width: 30%;
          height: 600px;
          overflow-y: auto;
          padding: 10px;
          box-sizing: border-box;

          .noComment {
            line-height: 530px;
          }

          .list {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            height: auto;
            display: flex;
            justify-content: flex-start;
            flex-flow: row nowrap;
            margin-bottom: 10px;

            .avatar {
              height: 35px;
              width: 38px;
              border-radius: 50%;
              vertical-align: middle;
              max-width: 100%;
            }

            .conment-detail {
              width: 100%;
              padding: 0 10px;
              box-sizing: border-box;
              text-align: left;

              .conment-top {
                margin-bottom: 10px;
                .name {
                  font-weight: bold;
                  margin-right: 10px;
                }
                .time {
                  display: block;
                  margin-top: 5px;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }

      .video_con {
        margin-bottom: 20px;
        width: 100%;
        height: 500px;

        video {
          margin-top: 20px;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
